<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="foot_nav" @click="onSearch">
				<view class="btn1">确认</view>
			</view>
		</view>
		<view class="container bg-white">
			<view class="ptb40 plr30">
				<view class="fs32 fwb col3">培训类型</view>
				<view>
					<view class="item " @click="bindCategoryChange(-1)" :class="{ac: query.category_id==-1}">不限</view>
					<view class="item " @click="bindCategoryChange(item.id)" :class="{ac: query.category_id==item.id}" v-for="item in cateories">{{item.name}}</view>
					
				</view>
				<view class="fs32 fwb col3 mt40">培训专业</view>
				<view>
					<view class="item" @click="bindMajorChange(-1)" :class="{ac: query.major_id==-1}">不限</view>
					<view class="item" @click="bindMajorChange(item.id)" :class="{ac: query.major_id==item.id}" v-for="item in majors">{{item.name}}</view>
				</view>
				<view class="fs32 fwb col3 mt40">培训等级</view>
				<view>
					<view class="item " @click="bindLevelChange(-1)" :class="{ac: query.level_id==-1}">不限</view>
					<view class="item " @click="bindLevelChange(item.id)" :class="{ac: query.level_id==item.id}" v-for="item in levels">{{item.name}}</view>
					
				</view>
				<view class="fs32 fwb col3 mt40">培训区域</view>
				<view>
					<view class="item " @click="bindDistrictChange(-1)" :class="{ac: query.district_id==-1}">不限</view>
					<view class="item " @click="bindDistrictChange(item.id)" :class="{ac: query.district_id==item.id}" v-for="(item,index) in districts">{{item.name}}</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				cateories: [],
				majors: [],
				levels: [],
				districts: [],
				currentDistrict: null,
				query: {
					category_id: -1,
					major_id: -1,
					level_id: -1,
					district_id: -1
				}
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			
			//培训类型
			this.$util.getTrainCategory(false).then(items=>{
				this.cateories = items;
			})
			//培训专业
			this.$util.getTrainMajor(false).then(items=>{
				this.majors = items;
			})
			//培训等级
			this.$util.getTrainLevel(false).then(items=>{
				this.levels = items;
			})
			//培训区域
			this.$util.getAreas(false).then(items=>{
				this.districts = items;
			})
			this.currentDistrict = this.$core.getCurrentDistrict();
			uni.$on(app.globalData.Events.CurrentDistrictChange, this.eventOnCurrentDistrictChange);
		},
		onUnload(){
			uni.$off(app.globalData.Events.CurrentDistrictChange, this.eventOnCurrentDistrictChange);
		},
		methods: {
			bindCategoryChange(id){
				this.query.category_id = id;
			},
			bindMajorChange(id){
				this.query.major_id = id;
			},
			bindLevelChange(id){
				this.query.level_id = id;
			},
			bindDistrictChange(id){
				this.query.district_id = id;
				// var district = {
				// 	id: 0,
				// 	name: '区域'
				// }
				// if(index > -1){
				// 	district = {
				// 		id: this.districts[index].id,
				// 		name: this.districts[index].name
				// 	}
				// }
				// this.$core.setCurrentDistrict(getApp().globalData.Events.CurrentDistrictChange,district)
			},
			onSearch(){
				let query = this.query;
				uni.navigateTo({
					url: '/pages/user/employ_skills_train?param='+JSON.stringify(query)
				})
			},
			eventOnCurrentDistrictChange: function(currentDistrict) {
				this.currentDistrict = currentDistrict;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 210rpx;
		height: 65rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #C6C6C6;
		line-height: calc(65rpx - 2px);
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		display: inline-block;
		vertical-align: top;
		margin-right: 30rpx;
		margin-top: 20rpx;
		&.ac{
			border: 1px solid var(--primary);
			color: var(--primary);
		}
		&:nth-of-type(3n){margin-right: 0;}
	}
	.foot_nav{
		padding: 10rpx 60rpx;
		border-top: 1px solid #EEEEEE;
	}
</style>